---
import clsx from "clsx";
import { Observed } from "./observed";

interface Props {
  title: string;
  subtitle: string;
  size?: "md" | "lg";
}
---

<Observed
  client:visible
  as="span"
  class="transition-all delay-250 duration-500 ease-out inline-block md:max-w-3/5"
  outOfViewClass="invisible -translate-x-4 opacity-0"
>
  <h2
    class={clsx(
      "!font-extrabold z-1 relative",
      Astro.props.size === "lg" ? "text-3xl md:text-6xl" : "text-2xl md:text-5xl "
    )}
  >
    <span class="bg-gradient-to-r text-transparent bg-clip-text">{Astro.props.title}</span><br />{
      Astro.props.subtitle
    }
  </h2>
</Observed>
